<template>
  <div class="enterprise_email_list">
    <div class="deploy">
      <span class="todo_btn" @click="plus">
        <i class="el-icon-plus"></i>
        {{$t('config.channel.enterpriseEmailAdd')}}
      </span>
      <span class="todo_btn" @click="refresh">
        <i class="iconfont icon-shuaxin"></i>
        {{$t('public.refresh')}}
      </span>
      <div class="search-pagination">
        <Pagination
          :small="true"
          :currentPage="currentPage"
          :count="total"
          @turnPage="turnPage"
          :totalPage="totalPage"
        >
        </Pagination>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" class="firm_mail_list_table" v-loading = "tableLoading" size="mini">
        <el-table-column prop="email" :label="$t('config.channel.enterpriseEmailTitle')"></el-table-column>
        <el-table-column prop="skillGroupName" :label="$t('public.queues')">
          <template scope="scope">
            <span v-if="scope.row.skillGroupName">{{scope.row.skillGroupName}}</span>
            <span v-else class="failure">{{$t('config.channel.unselected')}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('config.channel.associationState')">
          <template scope="scope">
            <!--{{scope.row.skillGroup}}-->
            <span v-if="scope.row.status === 'verifyPass'">{{$t('config.channel.identifySuccess')}}</span>
            <span v-else class="failure">{{$t('config.channel.waitIdentify')}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('public.operate')" width="380">
          <template scope="scope">
            <el-button type="text" size="small" @click="exclusiveSeatFun(scope.row)">{{$t('configLazyLoad.channel.exclusiveAgent')}}</el-button>
            <el-button type="text" size="small" @click="emailCategoreSet(scope.row)">{{$t('config.channel.mailCategory')}}</el-button>
            <el-button type="text" size="small" @click="tryForwarding(scope.row)">{{$t('config.channel.testForwarding')}}</el-button>
            <el-button type="text" size="small" @click="mailEdit(scope.row)">{{$t('public.edit')}}</el-button>
            <span class="delete" @click="deleteMail(scope.row)">{{$t('public.delete')}}</span>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination.vue'
  import * as globalTypes from '@/store/mutation-types'
  import {getCache, deepClone} from '@/utils/m7Utils.js'

  function tryProving (store, data) {
    let email = store.state.config.channelConfig.channelMail.mailInfo.data.name
    let emailDomain = email
    let sendData = {
      to: data.email,
      mailId: data.id,
      name: emailDomain
    }
    return store.dispatch('checkRelationEmail', sendData)
  }
  function sendCheckEmail (store, data) {
    let email = store.state.config.channelConfig.channelMail.mailInfo.data.name
    let emailDomain = email
    let sendData = {
      to: data.email,
      mailId: data.id,
      name: emailDomain
    }
    return store.dispatch('sendCheckEmail', sendData)
  }
  function getMailStatus (store, data) {
    return store.dispatch('getMailStatus', data)
  }
  function deleteMailFun (store, data) {
    let delData = {
      delID: data.id
    }
    return store.dispatch('delRelationEmail', delData)
  }

  export default {
    name: 'FirmMailList',
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        tableLoading: false,
        total: 0,
        categoreIofoClone: {},
        tableData: []
      }
    },
    computed: {
      totalPage () {
        return Math.ceil(this.total / this.pageSize) || 0
      },
      allList () {
        let data = this.$store.state.config.channelConfig.channelMail.mailInfo.data
        if (data && data.emailRelate) {
          return data.emailRelate
        } else {
          return []
        }
      },
      peers () {
        let mailQueues = deepClone(getCache('mailQueues'))
        return mailQueues
      }
    },
    activated () {
      this.$store.dispatch('getCache', {type: 'mailQueues', loadFromServer: true})
      this.$store.dispatch('getCache', {type: 'emailSign', loadFromServer: true})
    },
    methods: {
//      翻页
      turnPage (val) {
        this.currentPage = val
        this.tableLoading = true
        this.getList()
      },
//      添加邮箱
      plus () {
        if (!this.peers.length) {
          this.$message(this.$t('configLazyLoad.channel.addSkillGroupTips'))
          return
        }
        this.$emit('addEmail')
      },
//      测试转发
      tryForwarding (data) {
        let email = data.email
        tryProving(this.$store, data).then((res) => {
          if (res.success) {
            if (res.data === 'verifyPass') {
              this.emailSuccess(email, 'sure')
            } else {
              sendCheckEmail(this.$store, data).then((res) => {
                if (res.success) {
                  if (res.data === 'verifyPass') {
                    this.emailSuccess(email)
                  } else {
                    this.$store.commit(globalTypes.SET_SUCCESS, 'message.verification_mail')
                  }
                }
              })
            }
          } else {
            this.$store.commit(globalTypes.SET_ERROR, 'message.default_tips')
          }
        })
      },
//      邮箱关联成功
      emailSuccess (data, type) {
        if (type === 'sure') {
          this.$store.commit(globalTypes.SET_SUCCESS, this.$t('message.verification_mail_success', { mail: data }))
        } else {
          this.$store.commit(globalTypes.SET_SUCCESS, this.$t('message.verification_mail_success', { mail: data }))
          getMailStatus(this.$store, {})
        }
      },
//      获取当前页的列表数量
      getList () {
        if (this.allList.length) {
          let num = this.currentPage * 10
          this.tableData = this.allList.slice(num - 10, num)
          this.total = this.allList.length
        } else {
          this.tableData = []
          this.total = 0
        }
        this.tableLoading = false
      },
//      删除邮箱
      deleteMail (data) {
        let email = data.email
        let self = this
        this.$confirm(this.$t('message.deleteMail', {mail: email}), this.$t('public.delete'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          deleteMailFun(this.$store, data).then(() => {
            self.tableLoading = true
            self.refresh()
          })
        }).catch(() => {
        })
      },
//      邮件自动分类设置
      emailCategoreSet (data) {
        this.$emit('categore', data)
      },
      // 专属座席设置。
      exclusiveSeatFun (data) {
        this.$emit('exclusiveSeatFun', data)
      },
//      刷新列表
      refresh () {
        let self = this
        this.currentPage = 1
        self.tableLoading = true
        getMailStatus(this.$store, {}).then(() => {
          this.getList()
        })
      },
//      修改邮箱
      mailEdit (data) {
        if (!this.peers.length) {
          this.$message({
            message: '您当前没有技能组，请设置了技能组之后再进行修改邮箱',
            type: 'warning'
          })
        }
        this.$emit('mailEdit', data)
      }
    },
    components: {
      Pagination
    },
    beforeMount () {
      this.tableLoading = false
      this.refresh()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .search-pagination
    float right
    margin-top: -6px
    height: 30px
  .deploy
    height 30px
    padding 3px 10px 3px 15px
    line-height 30px
    .page
      margin-top 10px
    .el-pagination
      padding 0
    .todo_btn
      line-height 30px
      margin-right 8px
      cursor pointer
      i
        color $c-main
  .failure
    color #FF9100
  .mail_list_table
    overflow-y hidden
  .delete
    color $c-pink
    cursor pointer
    margin-left 10px
  .icon-shuaxin
    font-size 12px
</style>
